import { mergeWithoutArray } from '@/utils';
import ThemeUtil from '@/utils/Assist/Theme';
import {
  BASIC_DEFAULT_CONFIG,
  BASIC_DEFAULT_DATA_CONFIG,
  BASIC_DEFAULT_INTERACTIVE_CONFIG,
  DEFAULT_CONDITION_CONFIG,
  DEFAULT_LINKAGE_CONFIG,
} from '../../Common/Constants/defaultConfig';
import { TQrCodeConfig } from './type';

const DEFAULT_VALUE = {
  value: 'https://www.baidu.com/',
};

const DEFAULT_QR_CODE_LOGO =
  '';

export default () => {
  const CUSTOM_CONFIG: ComponentData.TInternalComponentConfig<TQrCodeConfig> = {
    interactive: {
      base: [],
      linkage: [
        {
          ...DEFAULT_LINKAGE_CONFIG,
          type: 'click',
          name: '点击',
        },
      ],
    },
    data: {
      request: {
        value: DEFAULT_VALUE,
        valueType: 'object',
      },
      filter: {
        map: [
          {
            field: 'name',
            map: '',
            description: '内容',
            id: 'name',
            type: 'string',
          },
          {
            field: 'value',
            map: '',
            description: '状态',
            id: 'value',
            type: 'string',
          },
        ],
      },
    },
    options: {
      condition: DEFAULT_CONDITION_CONFIG(),
      base: {
        backgroundColor: {
          r: 255,
          g: 255,
          b: 255,
        },
        codeColor: ThemeUtil.generateNextColor4CurrentTheme(0),
        margin: 4,
      },
      logo: {
        show: true,
        image: DEFAULT_QR_CODE_LOGO,
        size: {
          width: 50,
          height: 50,
        },
        borderRadius: 8,
        border: {
          width: 1,
          color: {
            r: 255,
            g: 255,
            b: 255,
          },
          type: 'solid',
        },
      },
    },
  };

  const DefaultConfig: ComponentData.TComponentData<TQrCodeConfig> =
    mergeWithoutArray(
      {},
      {
        data: BASIC_DEFAULT_DATA_CONFIG,
        interactive: BASIC_DEFAULT_INTERACTIVE_CONFIG,
      },
      BASIC_DEFAULT_CONFIG,
      {
        style: {
          width: 400,
          height: 400,
        },
      },
      CUSTOM_CONFIG,
    );

  return DefaultConfig;
};

export const themeConfig = {
  convert: (colorList: string[]) => {
    return {
      base: {
        codeColor: ThemeUtil.generateNextColor4CurrentTheme(0),
      },
    };
  },
};
